<template>
        <div class="card rdsp-card-view" data-page="policeChange">
            <div class="card-content card-content-padding">
                <div class="card-header police-card-header rdsp-card-title">警情变化
                    <div class="myblock">
                        <form id="form-data-type">
                            <select name="dateType" style="font-size:10px;padding:2px; border: 1px solid;
							color:#1b9cd6;" id="data-type" class="date-type" @change="drawChart">
                                <option value="4">最近一年</option>
                                <option value="3" selected>最近一个月</option>
                                <option value="1">最近24小时</option>
                            </select>
                        </form>
                    </div>
                </div>
                <div id="policeChangeLine">

                </div>
            </div>
        </div>
</template>
<style scoped>
    .card-header:after {
        width: 0px;
    }
    #policeChangeLine {
        width: 100%;
        height: 230px;
    }
    .police-card-header {
        padding-left: 0px;
        font-size: 14px;
        padding-right: 0px;
    }
</style>
<script>
    return {
        beforeCreate() {
            $("#policeChangeLine").empty();
        },
        methods: {
            drawChart: function () {
                var $ = this.$;
                var app = this.$app;
                var router = this.$router;
                var formData = app.form.convertToData('#form-data-type');
                var dateType = jQuery.trim(formData.dateType);
                var carChart = echarts.init(document.getElementById('policeChangeLine'));
                var xarr = [];
                var yarr = [];
                var id_org="";
                if (single_Orgid == "") {
                    id_org = userInfor.organizationIds;
                } else {
                    id_org = single_Orgid;
                }
                Dao.getPoliceList({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        organizationId: id_org,
                        timeType: dateType
                },function (data) {
                    for (var i = 1; i < data.length; i++) {
                        yarr.push(data[i].alert.toString());
                        let currentData = data[i].time.toString();
                        if (dateType == 1) {
                            xarr.push(currentData.slice(6, 8)+"日"+currentData.slice(8, 10) + ":00");
                        } else if (dateType == 3) {
                            xarr.push(currentData.slice(4, 6)+"月"+currentData.slice(6) + "日");
                        } else if (dateType == 4) {
                            xarr.push(currentData.slice(4, 6) + "月");
                        }
                    }
                carChart.setOption({
                    grid: {
                       top:'5%',
                       left: '1%',
                       right: '8%',
                       bottom: '3%',
                       containLabel: true,
                    },
                    tooltip: {
                        backgroundColor: 'white',
                        borderColor: 'gray',       // 提示边框颜色
                        borderRadius: 4,           // 提示边框圆角，单位px，默认为4
                        borderWidth: 1,
                        position: function (p) {   //其中p为当前鼠标的位置
                            return [p[0] - 28, p[1] - 70];
                        },
                        padding: 5,
                        trigger: 'axis',
                        formatter: "<span style='color:gray;font-size:10px;'>{b}报警</span><br/><span style='color:red;font-size:15px;'>{c}</span>",
                        textStyle: {align: 'center'},
                    },
                    xAxis:{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                                // 使用深浅的间隔色
                                color: chatLineColor
                            }
                        },
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:chatFontColor,
                            }
                        },
                        axisLine: {
                            show:true,
                            lineStyle: {
                                type: 'solid',
                                color: chatLineColor,//左边线的颜色
                                width: '1'//坐标线的宽度
                            }
                        },
                        data: xarr
                    },
                    yAxis:{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: chatLineColor,//左边线的颜色
                                width: '1'//坐标线的宽度
                            },
         
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:chatFontColor,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                                // 使用深浅的间隔色
                                color: chatLineColor
                            }
                        }
                    },
                    series: [{
                        ame: '当前报警',
                        //面积的颜色
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#54A1D6 '},
                                        {offset: 0.5, color: ' #c7dfff'},
                                        {offset: 1, color: '#eaf3ff'}
                                    ]
                                ),
                                lineStyle: {color: '#4f9cff', width: 2}
                            }
                        }, areaStyle: {normal: {}},
                        //面积边缘线的颜色
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#54A1D6 '},
                                        {offset: 0.8, color: ' #c7dfff'},
                                        {offset: 1, color: '#eaf3ff'}
                                    ]
                                ),
                                lineStyle: {color: '#54a1ff', width: 2}
                            }
                        },
                        data:(function (){
                            return yarr;
                        })(),
                        type: 'line',
                        smooth: true
                    }]
                });
                });
            }
        },
        on: {
            pageAfterIn: function (e, page) {
                var self = this;
                self.drawChart();
            }
        }
    }
</script>
